<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>档案管理系统</title>
    <link rel="stylesheet" href="../css/iview.css">
    <link rel="stylesheet" href="../css/ionicons.css">

    <!--引入js-->
    <!--解决axios在ie和手机上的兼容性问题-->
    <script type="text/javascript" src="../js/polyfill.min.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/iview.min.js"></script>
    <script src="../js/callBackService.js"></script>
</head>
<body>
<div id="app">
    <i-button type="warning" size="small" icon="android-add" @click="addRoot">添加根节点</i-button>
    <tree :data="treeData" :render="renderContent"></tree>
    <modal v-model="modal" :title="modelTitle" @on-ok="modelOK" ok-text="确认" cancel-text="取消">
        <i-form :model="formItem" :label-width="80">
            <form-item label="分类号">
                <i-input v-model="formItem.classifyId" placeholder="例如：JXT01"></i-input>
            </form-item>
            <form-item label="分类名">
                <i-input v-model="formItem.title"
                         placeholder="例如：图书资料（含期刊、教学参考书、光碟等）"></i-input>
            </form-item>
            <form-item label="目录等级">
                <i-select v-model="formItem.classifyLevel">
                    <i-option value="1">1级</i-option>
                    <i-option value="2">2级</i-option>
                    <i-option value="3">3级</i-option>
                    <i-option value="4">4级</i-option>
                    <i-option value="5">5级</i-option>
                </i-select>
            </form-item>
        </i-form>
    </modal>
</div>


</body>
<style>
    #app {
        height: 100%;
    }

    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-logo {
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }

    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-footer-center {
        text-align: center;
    }
</style>
<script type="text/babel">
    var ip = '';
    var Main = {
        data() {
            return {
                treeData: [],
                isEdit: false,
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                modal: false,
                formItem: {
                    classifyId: '',
                    title: '',
                    classifyLevel: '',
                    fatherData: '',
                    editNodeDate: '',
                    addIsRoot: false
                },
                modelTitle: '新增分类'
            }
        },
        mounted: function () {
            //向后台发送请求所有节点数据，并对data初始化
            // callAxiosGetNoParams("/getAllTreeNode",this.moutedSuccess,this.moutedFailed)
            axios.get(ip + "/getAllTreeNode")
                .then(response => {
                    this.treeData = response.data
                })
        },
        methods: {
            addRoot() {
                this.modal = true
                this.addIsRoot = true
            },

            moutedSuccess(data){
                this.treeData = data
            },

            moutedFailed(data){

            },

            //弹窗的确认事件
            modelOK() {
                if (this.modelTitle == "新增分类") {
                    this.append(this.addIsRoot)
                } else if (this.modelTitle == "修改分类信息") {
                    this.edit()
                }
            },
            //通过render函数自定义树的样式及点击事件
            renderContent(h, {root, node, data}) {
                return h('span', {
                    style: {
                        display: 'inline',
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'folder',
                                size: '20',
                                color: '#F6AF39'
                            },
                            style: {
                                marginRight: '8px',
                            }
                        }),
                        h('a', {
                            style: {
                                fontSize: '16px',
                                color: '#000',
                                display: 'inline-block',
                                verticalAlign: 'middle',
                                // width: '430px',
                                overflow: 'hidden',
                                whitespace: 'nowrap',
                                textOverflow: 'ellipsis',
                            },
                            on: {
                                click: () => {
                                    this.choose(root, node, data)
                                    console.log("根节点", root)
                                }
                            }
                        }, data.title)
                    ]),
                    h('span', {
                        style: {
                            float: 'right',
                            marginRight: '10px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'edit'
                            }), style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.modelTitle = "修改分类信息"
                                    this.formItem.classifyId = data.classifyId
                                    this.formItem.title = data.title
                                    this.formItem.classifyLevel = data.classifyLevel
                                    console.log("level " + data.classifyLevel)


                                    const parentKey = root.find(el => el === node).parent;
                                    const parent = root.find(el => el.nodeKey === parentKey).node;
                                    const index = parent.children.indexOf(data);
                                    this.formItem.editNodeDate = parent.children[index]
                                    this.modal = true
                                }
                            }
                        })
                        , h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'plus-round',
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.addIsRoot = false
                                    this.modal = true
                                    this.formItem.fatherData = data
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'trash-a'
                            }),
                            on: {
                                click: () => {
                                    //
                                    // console.log("root-->" + JSON.stringify(root))
                                    // console.log("node-->" + JSON.stringify(node))
                                    // console.log("data-->" + JSON.stringify(data))
                                    this.remove(root, node, data)
                                }
                            }
                        })
                    ])
                ]);
            },
            //增加树节点
            append(isRoot) {
                const data = this.formItem.fatherData
                const children = data.children || [];
                // console.log(JSON.stringify(data))

                var treeNode = {}
                treeNode.classifyId = this.formItem.classifyId
                treeNode.title = this.formItem.title
                treeNode.classifyLevel = this.formItem.classifyLevel
                treeNode.children = null
                if (isRoot) {
                    treeNode.classifyFatherId = 0
                    this.treeData.push(treeNode)
                    // this.$set(this.treeData,treeNode)
                    console.log("添加根节点")
                } else {
                    treeNode.classifyFatherId = data.classifyId
                    children.push(treeNode)
                    this.$set(data, 'children', children);
                    // this.$set(data, 'children', children);
                }


                console.log("表单数据" + JSON.stringify(this.formItem))
                axiosPost(ip + '/addTreeNode', treeNode)

                this.$Message.info('节点添加成功');
            },
            //编辑树节点
            edit() {
                const editNodeData = this.formItem.editNodeDate
                console.log("修改方法" + JSON.stringify(editNodeData))

                var treeNode = {}
                treeNode.classifyId = this.formItem.classifyId
                treeNode.title = this.formItem.title
                treeNode.classifyLevel = this.formItem.classifyLevel

                this.$set(editNodeData, 'classifyFatherId', this.formItem.classifyId);
                this.$set(editNodeData, 'title', this.formItem.title);
                this.$set(editNodeData, 'classifyLevel', this.formItem.classifyLevel);

                this.axiosPost(ip + '/updateTreeNode', treeNode)
            },
            //点击树节点
            choose(root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);

                this.axios.get(ip + '/getArchivesByClassifyId', {
                    params: {'classifyId': data.classifyId}
                }).then(function (response) {
                    var transformData = {}
                    transformData.tableData = response.data
                    transformData.treeNode = data
                    bus.$emit("updateEvent", transformData)
                }).catch(function (error) {
                    alert(error);
                });

            },
            //删除树节点
            remove(root, node, data) {
                var index, parent;
                if (data.classifyFatherId == 0) {
                    console.log("删除的是根节点,第" + node.nodeKey + "个")
                } else {
                    const parentKey = root.find(el => el === node).parent;
                    parent = root.find(el => el.nodeKey === parentKey).node;
                    index = parent.children.indexOf(data);

                }


                this.$Modal.confirm({
                    title: '删除节点',
                    content: '<p>确定删除此节点嘛</p><p>节点删除后，子目录也会被删除</p>',
                    onOk: () => {
                        axios.get(ip + '/deleteTreeNode', {
                            params: {'classifyId': data.classifyId}
                        }).then(function (response) {
                            // this.$Message.info('删除节点成功');
                        }).catch(function (error) {
                            alert(error);
                        });
                        this.$Message.info('删除节点成功');
                        if (data.classifyFatherId == 0) {
                            this.treeData.splice(node.nodeKey, 1)
                            this.treeData.push()
                            console.log("删除根节点成功")
                            // root.splice(node.nodeKey,1)
                        } else {
                            parent.children.splice(index, 1);
                        }

                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });


            },
            //axios post封装
            axiosPost(path, treeNode) {
                axios.post(path, JSON.stringify(treeNode), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                })
            }
        }
    }

    var Component = Vue.extend(Main)
    new Component().$mount('#app')


</script>

</html>